<template>
  <div>
    <div>
      <el-form label="left" label-position="left" label-width="80px">
        <h4>请填选以下内容：</h4>
      </el-form>
      <el-form label="left" label-position="left" label-width="80px">
        <el-form-item label="试卷：" style="width: 300px;">
          <el-input
              placeholder="请输入试卷名称"
              v-model="paperName"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="学科：" prop="sid" style="width: 300px;">
          <el-select v-model="form.sid" placeholder="选择学科">
            <el-option v-for="item in subjectFilter" :key="item.sid" :value="item.sid"
                       :label="item.subName+' ( '+item.uid+' )'"></el-option>
          </el-select>
        </el-form-item>
        <el-button @click="addQuestion" style="margin-bottom: 20px">添加题目</el-button>
      </el-form>
    </div>
    <div>
      <el-table
          :data="multipleSelection"
          style="width: 100%">
        <el-table-column
            label="题号"
            width="120">
          <template slot-scope="scope">{{ scope.row.qid }}</template>
        </el-table-column>
        <el-table-column
            prop="typeName"
            label="题型"
            width="120">
        </el-table-column>
        <el-table-column
            prop="stem"
            label="题干"
            width="auto">
        </el-table-column>
        <el-table-column
            prop="mark"
            label="分数"
            fixed="right"
            width="80">
        </el-table-column>
        <el-table-column
            prop="difficulty"
            label="难度"
            width="80"
            fixed="right">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120px">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <h4>总分：{{scores}}</h4>
      <el-button type="primary" style="margin-top: 12px;" @click="submitPaper">添加试卷</el-button>
    </div>
    <div>
      <el-dialog title="题目列表" :visible.sync="dialogTableVisible" width="80%">
        <span>题型：</span>
        <el-select v-model="typeName" placeholder="选择题型" @change="changeType">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              label="题号"
              width="120">
            <template slot-scope="scope">{{ scope.row.qid }}</template>
          </el-table-column>
          <el-table-column
              prop="typeName"
              label="题型"
              width="120">
          </el-table-column>
          <el-table-column
              label="题干"
              width="auto">
            <template slot-scope="scope">
              <span v-html="scope.row.stem"></span>
            </template>
          </el-table-column>
          <el-table-column
              prop="mark"
              label="分数"
              fixed="right"
              width="80">
          </el-table-column>
          <el-table-column
              prop="difficulty"
              label="难度"
              width="80"
              fixed="right">
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="pageSizes"
                       :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                       :total="totalCount">
        </el-pagination>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {getCourse, getQuestionTittle, postPaper, postPeoplePaper} from "../../api/data";

export default {
  name: "peopleTestPaper",
  data() {
    return {
      paperName: '',
      subjectFilter: [],
      scores: 0,
      form: {
        sid: null,  //课程号
        point: null,
        dynamicItem: [], //题型
      },
      tableData: [],
      // 默认显示第几页
      currentPage:1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount:1,
      // 个数选择器（可修改）
      pageSizes:[5,10,15,20],
      // 默认每页显示的条数（可修改）
      PageSize:10,
      typeName: '',
      multipleSelection: [],
      dialogTableVisible: false,
      options: [{
        value: '单选题',
        label: '单选题'
      }, {
        value: '多选题',
        label: '多选题'
      }, {
        value: '判断题',
        label: '判断题'
      }, {
        value: '填空题',
        label: '填空题'
      }, {
        value: '简答题',
        label: '简答题'
      }],
    };
  },
  methods: {
    handleSelectionChange(val) {//获取选中的题
      this.scores=0;
      let arr=this.multipleSelection
      this.multipleSelection = Array.from(new Set(arr.concat(val)));
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.scores+=this.multipleSelection[i].mark;
      }
    },
    changeType(){
      this.currentPage=1;
      let data={sid: this.form.sid,page: this.currentPage,num: this.PageSize,questionType: this.typeName}
      getQuestionTittle(JSON.stringify(data)).then((res)=>{
        this.totalCount=res.data.count;
        this.tableData=res.data.data;
      })
    },
    addQuestion(){
      this.dialogTableVisible = true;
      let data={sid: this.form.sid,page: this.currentPage,num: this.PageSize,questionType: ''}
      getQuestionTittle(JSON.stringify(data)).then((res)=>{
        this.totalCount=res.data.count;
        this.tableData=res.data.data;
      })
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize=val
      let data={sid: this.form.sid,page: "1",num: this.PageSize,questionType: this.typeName}
      getQuestionTittle(JSON.stringify(data)).then((res)=>{
        this.totalCount=res.data.count;
        this.tableData=res.data.data;
      })
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage=1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage=val
      // 切换页码时，要获取每页显示的条数

      let data={sid: this.form.sid,page: val,num: this.PageSize,questionType: this.typeName}
      // 点击每页显示的条数时，显示第一页
      getQuestionTittle(JSON.stringify(data)).then((res)=>{
        this.totalCount=res.data.count;
        this.tableData=res.data.data;
      })
    },
    handleDelete(index) {
      //删除数据
      if(index>-1){
        this.scores-=this.multipleSelection[index].mark;
        this.multipleSelection.splice(index,1);
      }
    },
    submitPaper() {
      let paper = {
        paperName: this.paperName,
        sid: this.form.sid,
        paperMessage: this.multipleSelection
      };
      console.log(JSON.stringify(paper))
      postPeoplePaper(JSON.stringify(paper)).then((res) => {
        if (res.data.code === 0) {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        } else {
          this.$message.error('提交失败');
        }
      })
    },
  },
  mounted() {
    getCourse().then(res => {
      this.subjectFilter = res.data;
    })
  }
}
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
